<template>
	<u-popup :show="popupShow" mode="bottom" border-radius="14px" background-color="transparent"
		:safe-area-inset-bottom="false" @open="openPopup" @close="closePopup">
		<view class="list-container">
			<view class="top-area" :style="{'background-image': 'url('+HonorListImg.dailyBack+')'}">
				<u-tabs :list="tabList" :current="currentTab" :itemStyle="tabStyle" inactive-color="#9A71BA" :is-scroll="false"
					lineColor="#9F6EFF" bar-width="150" bar-height="6" @change="changeTab"
					:activeStyle="{fontFamily: 'Source Han Sans CN', fontWeight: '500', color:'#22123C'}">
				</u-tabs>
				<view class="period">
					<view class="title">上期TOP3</view>
					<view class="content">
						<view v-if="rankList.length >= 2" class="rank-container column-center-flex second-view">
							<view class="rank-img" :style="{'background-image': 'url('+HonorListImg.two+')'}">
								<!-- <view class="rank-img-container"> -->
									<image :src="rankList[1].avatar"></image>
									<view>2</view>
								<!-- </view> -->
							</view>
							<view class="rank-text text-2">
								<view>{{ rankList[1].payPrice + '荣誉值' }}</view>
								<view>{{ rankList[1].user_name }}</view>
							</view>
						</view>
						<view v-if="rankList.length >= 1" class="rank-container column-center-flex first-view">
							<view class="rank-img" :style="{'background-image': 'url('+HonorListImg.one+')'}">
								<!-- <view class="rank-img-container"> -->
									<image :src="rankList[0].avatar"></image>
									<view>1</view>
								<!-- </view> -->
							</view>
							<view class="rank-text text-1">
								<view>{{ rankList[0].payPrice + '荣誉值' }}</view>
								<view>{{ rankList[0].user_name }}</view>
							</view>
						</view>
						<view v-if="rankList.length >= 3" class="rank-container column-center-flex third-view">
							<view class="rank-img" :style="{'background-image': 'url('+HonorListImg.three+')'}">
								<!-- <view class="rank-img-container"> -->
									<image :src="rankList[2].avatar"></image>
									<view>3</view>
								<!-- </view> -->
							</view>
							<view class="rank-text text-3">
								<view>{{ rankList[2].payPrice + '荣誉值' }}</view>
								<view>{{ rankList[2].user_name }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom-area">
				<scroll-view class="scroll-view" scroll-y>
					<view v-if="isEmpty" class="empty-content main-center-flex"> 
						<u-empty text="暂无数据" mode="list"></u-empty>
					</view>
					<view v-else>
						<view v-for="(item,index) in rankList" :key="index" class="rank-list"
							:style="{'background-color': index <=2 ? rankColor[index] : 'transparent'}">
							<view v-if="index <= 2" class="bk-rank"
								:style="{'color': index <=2 ? bkRankColor[index] : 'transparent'}">
								{{bkRank[index]}}
							</view>
							<view class="rank-item">
								<view class="left-area main-center-flex">
									<view v-if="index <= 2" class="avatar-class"
										:style="{'background-image': 'url('+RankAvatar[index]+')'}">
										<text :class="rankClass[index]">{{ index + 1 }}</text>
									</view>
									<text v-else class="rank-title">{{ index + 1 }}</text>
								</view>
								<view class="middle-area">
									<image :src="item.avatar" class="avatar"></image>
									<view class="user-name">{{ item.user_name }}</view>
								</view>
								<view class="right-area">
									<text>荣誉值</text>
									<text>{{ item.payPrice }}</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view v-if="isShowMyRank" class="item-view">
					<view class="rank-item-self">
						<view class="left-area column-center-flex">
							<text class="title_1">我的排名:</text>
							<text v-if="myRankInfo.num" class="rank-title">{{ myRankInfo.num }}</text>
						</view>
						<view class="middle-area">
							<image :src="myRankInfo.avatar" class="avatar"></image>
							<view class="user-name">{{ myRankInfo.user_name }}</view>
						</view>
						<view class="right-area">
							<text>荣誉值</text>
							<text>{{ myRankInfo.payPrice }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import { HonorListImg, RankAvatar } from '../../utils/objectValue';
	import { getRankData } from '@/api/newer.js';

	export default {
		props: {
			// popupShow: {
			// 	type: Boolean,
			// 	default: false
			// }
		},
		data() {
			return {
				HonorListImg,
				RankAvatar,
				popupShow: false,
				tabList: [
					{
						name: '日榜',
						value: '1'
					},
					{
						name: '周榜',
						value: '2'
					}
				],
				currentTab: 0,
				curValue: '1',
				tabStyle: {
					width: '50%',
					height: '80rpx',
					fontSize: '28rpx',
					fontFamily: 'Source Han Sans CN',
					fontWeight: '400',
					color: '#22123C',
				},
				rankColor: {
					0: '#FAF1FF',
					1: '#EBF9FF',
					2: '#FFF9F9',
				},
				rankClass: {
					0: 'first',
					1: 'second',
					2: 'third',
				},
				bkRank: {
					0: 'TOP1',
					1: 'TOP2',
					2: 'TOP3',
				},
				bkRankColor: {
					0: '#F4E1FF',
					1: '#D4F2FF',
					2: '#FFF1F5',
				},
				rankList: [],
				myRankInfo: {},
				isEmpty: false
			};
		},
		computed: {
			isShowMyRank() {
				return !!Object.keys(this.myRankInfo).length;
			}
		},
		methods: {
			open() {
				this.popupShow = true;
			},
			openPopup() {
				this.curValue = '1';
				this.currentTab = 0;
				this.getListData();
			},
			closePopup() {
				this.popupShow = false;
			},
			changeTab(e) {
				this.currentTab = e.index;
				this.curValue = e.value;
				this.getListData();
			},
			async getListData() {
				const {code, data} = await getRankData({type: this.curValue});
				if(code == 0) {
					const {rankList = [], myRank, myRnkInfo} = data;
					if(rankList.length) {
						this.isEmpty = false;
					} else {
						this.isEmpty = true;
					}
					this.rankList = [...rankList];
					this.myRankInfo = {
						...myRank,
						...myRnkInfo
					};
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.list-container{
    width: 100vw;
    max-height: 80vh;
	.top-area{
		background-size: 100% 100%;
		height: 458rpx;
	}
	.bottom-area{
		height: calc(80vh - 458rpx);
		background-color: #ffffff;
	}
	.scroll-view{
		width: 100%;
		height: calc(100% - 144rpx);
	}
	.empty-content{
		height: 100%;
	}
	.period{
		width: 100%;
		// height: 350rpx;
		height: calc(100% - 41px);
	}
	.title {
		font-size: 44rpx;
		font-family: BTH;
		height: 32px;
		color: #FFFFFF;
		text-align: center;
	}
	.content{
		width: 100%;
		height: calc(100% - 32px);
		margin-top: 20rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.rank-container{
		width: calc(100% - 50px);
		// height: calc(100% - 32px);
	}
	.first-view{
		margin-bottom: 10px;
	}
	.second-view{
	}
	.third-view{
		margin-top: 12px;
	}
	.rank-img{
		width: 186rpx;
		height: 174rpx;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		z-index: 99;
		image {
			width: 98rpx;
			height: 98rpx;
			border-radius: 49rpx;
			z-index: 1;
		}
		view{
			font-size: 26rpx;
			font-family: Inter-Medium, Inter;
			color: #FFFFFF;
			padding-bottom: 8rpx;
			z-index: 99;
		}
		
	}
	.rank-text{
		width: 186rpx;
		margin-top: -46rpx;
		padding-top: 46rpx;
		text-align: center;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 10%, rgba(255, 255, 255, 0.1));
		view{
			padding-top: 5px;
			font-size: 13px;
			font-family: PingFang SC-Medium, PingFang SC;
			color: #FFFFFF;
		}
	}
	.text-1{
		height: 180rpx;
	}
	.text-2{
		height: 160rpx;
	}
	.text-3{
		height: 160rpx;
	}
	.rank-list{
		width: 100%;
		position: relative;
	}
	.bk-rank{
		position: absolute;
		width: 100%;
		height: 100%;
		font-size: 144rpx;
		font-family: BTH;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.item-view{
		width: 100%;
		padding: 0 30rpx;
		box-shadow: 0rpx -5rpx 9rpx 1rpx rgba(86, 86, 86, 0.09);
	}
	.rank-item-self{
		height: 144rpx;
		display: flex;
		align-items: center;
	}
	.rank-item{
		height: 144rpx;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
	}
	.left-area {
		width: 99rpx;
	}
	.middle-area{
		width: calc(100% - 199rpx);
		height: 100%;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		.avatar{
			width: 84rpx;
			height: 84rpx;
			z-index: 99;
		}
		.user-name{
			padding-left: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #22123C;
			z-index: 99;
		}
	}
	.right-area{
		width: 100rpx;
		text-align: right;
		display: flex;
		flex-direction: column;
		text{
			font-size: 28rpx;
			font-family: Inter-Regular, Inter;
			font-weight: 400;
			color: #777777;
			z-index: 99;
		}
	}
	.avatar-class{
		width: 53rpx;
		height: 59rpx;
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 99;
	}
	.title_1{
		font-size: 22rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #777777;
	}
	.rank-title{
		font-size: 32rpx;
		font-family: Inter-Regular, Inter;
		font-weight: 400;
		color: #22123C;
		z-index: 99;
	}
	.first{
		font-size: 32rpx;
		font-family: BTH;
		font-weight: 400;
		padding-top: 3px;
		background: linear-gradient(180deg, #831BFC 0%, #BD78FE 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
	.second{
		font-size: 32rpx;
		font-family: BTH;
		font-weight: 400;
		padding-top: 3px;
		background: linear-gradient(180deg, #42C2F7 0%, #71D0FE 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
	.third{
		font-size: 32rpx;
		font-family: BTH;
		font-weight: 400;
		padding-top: 3px;
		color: #C87D94;
	}
	.my-rank{
		width: 100%;
	}
}
.u-popup__content{
	background-color: transparent;
}
</style>